import React, { Component } from 'react'

/**
 * props深入
 * 1. children属性
 * - children 属性：表示组件标签的子节点。当组件标签有子节点时，props 就会有该属性
 * - children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）
 */

const Fnc = (props) => {
  console.log('函数组件：', props)
  return (
    <div>
      <h2>函数组件</h2>
    </div>
  )
}

//  子组件
class Child extends Component {
  render() {
    console.log('类组件：', this.props)
    return (
      <div>
        <h2>子组件</h2>
        <button onClick={this.props.children}>调用子节点的方法</button>
      </div>
    )
  }
}

// 父组件
class Index extends Component {
  render() {
    return (
      <div>
        <h1>props深入</h1>
        <Child>
          {() => {
            console.log(123)
          }}
        </Child>
        <hr />
        <Fnc>
          <h1>123</h1>
        </Fnc>
      </div>
    )
  }
}

export default Index
